<template>
  <div>
    <SearchForm v-model:form="form" @search="handleSearch" />
    <PaginationCard
      v-model:current-page="paginationData.currentPage"
      v-model:page-size="paginationData.pageSize"
      :total="paginationData.total"
      :load-list="getTableData"
      v-loading="isLoading"
    >
      <AppTable :data="tableData" :columns="columns" border />
    </PaginationCard>
    <Drawer
      v-model="visible"
      :with-header="false"
      size="50%"
      @closed="tabPaneName = 'action'"
    >
      <el-tabs v-model="tabPaneName" type="border-card">
        <el-tab-pane label="Action记录" name="action">
          <ActionList v-if="visible" v-model:audit-log-id="auditLogId" />
        </el-tab-pane>
        <el-tab-pane label="entity修改记录" name="entity">
          <EntityChangeLog v-if="visible" v-model:audit-log-id="auditLogId" />
        </el-tab-pane>
      </el-tabs>
    </Drawer>
  </div>
</template>

<script setup lang="tsx">
import { ElMessageBox } from 'element-plus'
import { computed, onMounted, ref } from 'vue'

import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import { IButtonConfig } from '@/components/AppButtonGroup/type'
import AppTable from '@/components/AppTable/index.vue'
import Drawer from '@/components/Drawer/index.vue'
import PaginationCard from '@/components/PaginationCard/index.vue'
import usePagination from '@/hooks/usePagination'
import { getAuditLog } from '@/http/auditLog'
import { IAuditLogParams, IAuditLogResult } from '@/http/types/auditLog'
import { parseDate2Str } from '@/utils/timeUtils'

import ActionList from './ActionList.vue'
import EntityChangeLog from './EntityChangeLog.vue'
import SearchForm from './SearchForm.vue'

const buttonConfig: IButtonConfig[] = [
  {
    name: '详细信息',
    eventName: 'handleDetail',
    type: 'primary',
  },
]
const columns = ref([
  { label: '用户名', prop: 'userName', width: 130 },
  { label: '请求地址', prop: 'url' },
  { label: '请求方法', prop: 'httpMethod', width: 110 },
  { label: '状态码', prop: 'httpStatusCode', width: 110 },
  { label: '耗时/ms', prop: 'executionDuration', width: 110 },
  {
    label: '异常信息',
    render: ({ row }: { row: IAuditLogResult }) => (
      <p class="exceptions" onClick={() => lookExceptions(row.exceptions)}>
        {row.exceptions}
      </p>
    ),
  },
  { label: '客户端地址', prop: 'clientIpAddress' },
  { label: '浏览器信息', prop: 'url' },
  {
    label: '执行时间',
    prop: 'executionTime',
    formatter: (row: IAuditLogResult) =>
      parseDate2Str(row.executionTime, 'YYYY-MM-DD HH:mm:ss'),
  },
  {
    label: '操作',
    fixed: 'right',
    render: ({ row }: { row: IAuditLogResult }) => {
      return (
        <AppButtonGroup
          rowData={row}
          buttonConfigs={buttonConfig}
          onEvent={(eventName: string) => {
            eventName === 'handleDetail' && handleDetail(row)
          }}
        ></AppButtonGroup>
      )
    },
  },
])
const lookExceptions = (value: string) => {
  if (!value) return
  ElMessageBox.alert(value, '异常信息', {
    showCancelButton: true,
    showConfirmButton: false,
    cancelButtonText: '关闭',
    customClass: 'exceptionsMessageBox',
  })
}

const visible = ref(false)
const auditLogId = ref('')
const tabPaneName = ref<'action' | 'entity'>('action')
const handleDetail = (actions: IAuditLogResult) => {
  auditLogId.value = actions.id
  visible.value = true
}
onMounted(() => {
  getTableData()
})
const form = ref<IAuditLogParams>({
  httpMethod: '',
  hasException: '',
  httpStatusCode: '',
  url: '',
  userName: '',
  applicationName: '',
  minExecutionDuration: '',
  maxExecutionDuration: '',
  date: ['', ''],
})

const params = computed(() => {
  return {
    httpMethod: form.value.httpMethod,
    hasException: form.value.hasException,
    httpStatusCode: form.value.httpStatusCode,
    url: form.value.url,
    userName: form.value.userName,
    applicationName: form.value.applicationName,
    minExecutionDuration: form.value.minExecutionDuration,
    maxExecutionDuration: form.value.maxExecutionDuration,
    startTime: form.value.date && form.value.date[0],
    endTime: form.value.date && form.value.date[1],
  }
})

const {
  isLoading,
  paginationData,
  tableData,
  getTableData,
  handleSearch,
  // handleSortChange
} = usePagination(getAuditLog, params)
</script>

<style scoped lang="scss">
@use '@/styles/mixin.scss';
:deep(.exceptions) {
  @include mixin.ellipsis(3);
}
</style>
